<!-- 2:实现类似淘宝首页的图片轮播，五张图片轮流按照顺序显示，1秒切换一次，如果鼠标放在图片上，则停止，鼠标移开，继续轮播；
下面有5个图片索引，对应五张图片，在图片右下角，显示到第几张，则对应位置的圆点背景色为红色。
每张图片都是一个链接 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				margin: 0 auto;
				padding: 0;
			}

			#box {
				width: 1226px;
				/*单张图片的宽度*/
				height: 250px;
				/* margin: 50px auto 0; */
				overflow: hidden;
			}

			#box ul {
				width: 4904px;
				/*4张图片的总宽度*/
			}

			#box ul li {
				float: left;
				list-style: none;
			}

			#box .banner_pic .pic {
				display: none;
				/* 让有这个属性的li图片不显示 */
			}

			#box .banner_pic .current {
				display: block;
				/* 让有这个属性的li图片显示 */
			}

			#box ol {
				position: absolute;
				left: 20%;
				top: 30%;
				margin: 0 auto;
			}

			#box ol .but {
				float: left;
				width: 10px;
				height: 10px;
				border: 1px solid white;
				border-radius: 50%;
				margin-right: 10px;
			}

			#box ol li {
				cursor: pointer;
				list-style: none;
			}

			#box ol .current {
				background: red;
				float: left;
				width: 10px;
				height: 10px;
				border: 1px solid red;
				border-radius: 50%;
				margin-right: 10px;
			}

			.one {
				position: absolute;
				left: 50%;
				top: 0;
				margin-left: -650px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="banner_pic" id="banner_pic">
				<li class="current"><a href="https://www.baidu.com"><img class="one" src="image/1.jpg" alt=""></a></li>
				<li class="pic"><a href="https://www.baidu.com"><img class="one" src="image/2.jpg" alt=""></a></li>
				<li class="pic"><a href="https://www.baidu.com"><img class="one" src="image/3.jpg" alt=""></a></li>
				<li class="pic"><a href="https://www.baidu.com"><img class="one" src="image/4.jpg" alt=""></a></li>
				<li class="pic"><a href="https://www.baidu.com"><img class="one" src="image/5.jpg" alt=""></a></li>
			</ul>
			<ol id="button">
				<li class="current"></li>
				<li class="but"></li>
				<li class="but"></li>
				<li class="but"></li>
				<li class="but"></li>
			</ol>
		</div>

		<script type="text/javascript">
			window.onload = function() {
				//顶部的焦点图切换
				function hotChange() {
					var current_index = 0;
					var timer = window.setInterval(autoChange, 1000); //设置计时器
					//获取所有的li对象
					var button_li = document.getElementById("button").getElementsByTagName("li");
					var pic_li = document.getElementById("banner_pic").getElementsByTagName("li");
					for (var i = 0; i < button_li.length; i++) {
						button_li[i].onmouseover = function() {
							//当鼠标指针移至图片之上时运行脚本:
							if (timer) {
								clearInterval(timer); //清楚原有的timer
							}
							//for循环找到这个下标、图片
							for (var j = 0; j < pic_li.length; j++) {
								if (button_li[j] == this) { //如果此时的button_li[j]下标刚好对应此时的图片
									current_index = j; //更新下标
									button_li[j].className = "current";
									pic_li[j].className = "current";
								} else {
									pic_li[j].className = "pic";
									button_li[j].className = "but";
								}
							}
						}
						//当鼠标不在上面的时候，设置自动话轮播图效果	
						button_li[i].onmouseout = function() {
							timer = setInterval(autoChange, 1000);
						}
					}

					function autoChange() {
						++current_index;
						if (current_index == button_li.length) {
							current_index = 0;
						}
						for (var i = 0; i < button_li.length; i++) {
							if (i == current_index) {
								button_li[i].className = "current";
								pic_li[i].className = "current";
							} else {
								button_li[i].className = "but";
								pic_li[i].className = "pic";
							}
						}
					}
				}
				hotChange();
			}
		</script>

	</body>
</html>
